<template>
  <div class="audio-wrap">
    <!--<div class="avatar">-->
    <img :src="music.ablumPic" alt="" class="avatar" />
    <!--</div>-->
    <div class="info">
      <p>{{music.name}}</p>
      <p class="actor">{{music.artists| singerName}}</p>
    </div>
    <div class="btn">
      <a class="iconfont icon-zanting" @click="play" v-if="isMusic"></a>
      <a class="iconfont icon-play-o" @click="pause" v-else></a>
      <a class="iconfont icon-liebiao1"></a>
    </div>
    <audio id="audio" :src="music.musicUrl" loop autoplay></audio>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      // musicUrl: ''
    }
  },
  methods: {
    play() {
      var audio = document.getElementById('audio');
      this.$store.commit('pause');
      audio.pause();
    },
    pause() {
      var audio = document.getElementById('audio');
      this.$store.commit('play');
      audio.play();
    }
  },
  computed: {
    music() {
      return this.$store.state.music;
    },
    isMusic() {
      return this.$store.state.isMusic;
    },
    // musicUrl() {
    //   console.log('这是现在播放的音乐' + this.music.id);
    //   this.$http.get('http://localhost:3000/music/url?id=' + this.music.id)
    //     .then(response => {
    //       console.log(response.body.data[0].url)
    //       return response.body.data[0].url;
    //     })
    // }
  },
  mounted() {

  },
  filters: {
    singerName(value) {
      if (value.length >0 ) {
        // console.log(value)
        if (value.length > 1) {
          var arr = [];
          value.forEach(function (e) {
            arr.push(e.name);
          });
          return arr = arr.join('/');
        } else {
          return value[0].name;
        }
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
@import '../../../static/base/public.scss';
@import url('../../../static/css/iconfont.css');
[data-dpr='1'] .icon-play-o {
  font-size: 28px;
}

[data-dpr='2'] .icon-play-o {
  font-size: 56px;
}

[data-dpr='3'] .icon-play-o {
  font-size: 84px;
}

[data-dpr='1'] .icon-zanting {
  font-size: 30px;
}

[data-dpr='2'] .icon-zanting {
  font-size: 60px;
}

[data-dpr='3'] .icon-zanting {
  font-size: 90px;
}

[data-dpr='1'] .icon-liebiao1 {
  font-size: 32px;
}

[data-dpr='2'] .icon-liebiao1 {
  font-size: 64px;
}

[data-dpr='3'] .icon-liebiao1 {
  font-size: 96px;
}

.audio-wrap {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.1rem 0.15rem;
  height: 1.4rem;
  background: $baseColor;
  color: #ffffff;
  .avatar {
    align-self: stretch;
    width: 1.24rem;
    overflow: hidden;
  }
  .info {
    box-sizing: border-box;
    padding-left: 0.15rem;
    padding-bottom: 0.16rem;
    height: 100%;
    vertical-align: top;
    flex: auto;
    p {
      margin-top: 0.15rem;
      line-height: 1;
      height: 1em;
    }
    .actor {
      opacity: .6;
    }
  }
  .btn {
    display: flex;
    align-content: center;
  }
}
</style>
